<template>
  <div class="list">
    <div class="like">
        <h2>猜你喜欢</h2>
        <ul>
            <li 
                v-for="(item,index) in likeList" :key="index"
                @click="jump(index)"
                :class="{active : currentIndex == index}"
                >
                {{item}}
            </li>
        </ul>
    </div>
    <div class="hotel" v-for="(item,index) in shopList" :key="index" @click="godetail(item.mtWmPoiId)">
        <div class="left">
            <img v-lazy="item.picUrl" alt="">
        </div>
        <div class="right">
            <div class="name">
                <h2>{{item.name}}</h2>
            </div>
            <div class="score">
                <van-icon name="star" />
                <span>{{item.averagePriceTip}}</span>
                <span>{{item.monthSalesTip}}</span>
            </div>
            <div class="price">
                <div class="lefts">
                    <span>{{item.minPriceTip}}</span>
                    <span>{{item.shippingFeeTip}}</span>
                </div>
                <div class="rights">
                    <span>{{item.deliveryTimeTip}}</span>
                    <span>{{item.distance}}</span>
                </div>
            </div>
            <ul>
                <li v-for="(v,i) in item.discounts2" :key="i">{{v.info}}</li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
import {shop} from '@/utlis/api'
export default {
    data(){
        return{
            shopList:[],
            currentIndex:0,
            likeList:['综合排序','距离最近','销量最高','筛选'],
        }
    },
    mounted(){
        shop().then(res=>{
            console.log(res.data.list);
            this.shopList = res.data.list
        })
    },
    methods:{
        godetail(id){
            this.$router.push({
                path:"/detail",
                query:{id}
            })
        },
        jump( index){
            this.currentIndex = index;
            if(index == 0){
                this.shopList.sort((a,b)=>{
                    return b.averagePriceTip - a.averagePriceTip
                })
            }
            if(index == 1){
                this.shopList.sort((a,b)=>{
                    return a.distance - b.distance
                })
            }
            if(index == 2){
                this.shopList.sort((a,b)=>{
                    return b.monthSalesTip - a.monthSalesTip
                })
            }
        },

    }

}
</script>

<style lang="scss" scoped>
.list{
    width: 96%;
    margin: 0 auto ;
    .like{
        h2{
            font-weight: 600;
            font-size: 26px;
            padding: 10px 0;
        }
        ul{
            display: flex;
            justify-content: space-between;
            margin: 10px 0 20px;
            li{
                font-size: 18px;
            }
        }
    }
    .hotel{
        display: flex;
        margin:20px 0;
        // background: pink;
        .left{
            width: 110px;
            margin-right: 15px;
            img{
                width: 100%;
                height: 100px;
                margin-top: 10px;
            }
        }
        .right{
            flex: 1;
            display: flex;
            flex-direction: column;
            h2{
                font-size: 18px;
                font-weight: 600;
                margin-bottom: 15px;
            }
            .score{
                font-size: 15px;
                color: orangered;
                margin-bottom: 8px;
                .van-icon{
                    margin-right: 3px;
                }
                span:last-child{
                    margin-left: 10px;
                    color: #666;
                }
            }
            .price{
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                color: #666;
                margin-bottom: 10px;
                .lefts{
                    span:first-child{
                        margin-right: 8px;
                    }
                }
                .rights{
                    span:first-child{
                        margin-right: 5px;
                    }
                }
            }
            ul{
                display: flex;
                flex-wrap: wrap;
                li{
                    font-size: 12px;
                    color: red;
                    padding: 0 3px;
                    margin: 5px 5px 0 0;
                    border: 1px solid pink;
                    border-radius: 2px;
                }
            }
        }
    }
}
.btn{
    width: 48px;
    padding: 5px 10px;
    background: red;
    color: #fff;
    border-radius: 24px;
    text-align: center;

}
.active{
    font-weight: bold;
}

</style>